<template>
    <div class="flex-c w100" style="z-index: 1">
        <div :id="'wangeditor' + rnd"></div>
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
        props: {
            value: {},
            config: {}
        },
        name: "EzArt",
        data() {
            let rnd = parseInt(Math.random()*1000000)
            return {
                inSideValue: "",
                rnd
            }
        },
        mounted() {
            let editor = new E('#wangeditor'+this.rnd)
            this.inSideValue = this.value
            editor.config.onchange = html => {
                this.inSideValue = html
                this.$emit('input', html)
            }
            editor.config.uploadImgServer = this.$http.root() + '/vue_upload'
            editor.config.uploadFileName = 'file'
            editor.config.menus = [
                // 菜单配置
                'head', // 标题
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'quote', // 引用
                'emoticon', // 表情
                'image', // 插入图片
                'table', // 表格
                'code', // 插入代码
                'undo', // 撤销
                'redo' // 重复
            ]
            editor.create()
            editor.txt.html(this.inSideValue)


        },
        watch: {
            inSideValue(val) {
                this.$emit("input", val)
            }
        }
    }
</script>

<style scoped>

</style>
